/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  Platform,
  TouchableOpacity,
  View
} from 'react-native';

import Toast from 'react-native-root-toast';
import GesturePassword from 'react-native-gesture-password';

import Tabbar from './tabbar.js';


export default class CockpitGesturePassword extends Component {
    constructor(props) {
      super(props);
      this.state={
          status: 'normal',
          message: '请设置手势密码',
          hasGesturePassword: false,
          GesturePassword: '',
      };
    }

    componentDidMount(){
        storage.load({
            key: 'GesturePassword' + global.userid,
        }).then(ret => {
            // 如果找到数据，则在then方法中返回
            // 注意：这是异步返回的结果（不了解异步请自行搜索学习）
            // 你只能在then这个方法内继续处理ret数据
            // 而不能在then以外处理
            // 也没有办法“变成”同步返回
            // 你也可以使用“看似”同步的async/await语法

            //console.log(ret.userid);
            this.setState({
                status: 'normal',
                message: '请输入手势密码',
                hasGesturePassword: true,
                GesturePassword: ret.GesturePassword, 
            });
        }).catch(err => {
            //如果没有找到数据且没有sync方法，
            //或者有其他异常，则在catch中返回
            //console.warn(err.message);
            switch (err.name) {
                case 'NotFoundError':
                    // TODO;
                    this.setState({
                        status: 'normal',
                        message: '请设置手势密码',
                        hasGesturePassword: false,
                    });
                    break;
                case 'ExpiredError':
                    // TODO
                    break;
            }
        });
    }

    onEnd(password) {
        //有手势密码
        if (this.state.hasGesturePassword && password == this.state.GesturePassword) {
            this.setState({
                status: 'right',
                message: '验证成功'
            });
            //登录成功跳转
            const { navigator } = this.props;
            if(navigator) {
                navigator.push({
                    name: 'Tabbar',
                    component: Tabbar
                })
            }
        } else if (this.state.hasGesturePassword && password != this.state.GesturePassword) {
            this.setState({
                status: 'wrong',
                message: '手势密码错误'
            });
        } else if (!this.state.hasGesturePassword && '' == this.state.GesturePassword) {
            this.setState({
                status: 'normal',
                message: '请再次输入手势密码',
                GesturePassword: password,
            });
        } else if (!this.state.hasGesturePassword && password == this.state.GesturePassword) {
            this.setState({
                status: 'normal',
                message: '手势密码设置成功,请输入手势密码',
                hasGesturePassword: true,
            });
            storage.save({
                key: 'GesturePassword' + global.userid,  // 注意:请不要在key中使用_下划线符号!
                rawData: { 
                    GesturePassword: password,
                },

                // 如果不指定过期时间，则会使用defaultExpires参数
                // 如果设为null，则永不过期
                expires: null
            }).then(() => {
                this.setState({
                    status: 'normal',
                    message: '手势密码设置成功,请输入手势密码',
                    hasGesturePassword: true,
                });
            }).catch(err => {
                this.setState({
                    status: 'wrong',
                    message: '手势密码保存失败，请重新设置', 
                    hasGesturePassword: false,
                });
            });


        } else if (!this.state.hasGesturePassword && password != this.state.GesturePassword) {
            this.setState({
                status: 'wrong',
                message: '请重新设置手势密码',
                GesturePassword: '',
            });
        }
    }

    onStart() {
        if (!this.state.hasGesturePassword && '' == this.state.GesturePassword) {
            this.setState({
                status: 'normal',
                message: '请设置手势密码',
            });
        } else if (!this.state.hasGesturePassword && '' != this.state.GesturePassword) {
            this.setState({
                status: 'normal',
                message: '请再次输入手势密码',
            });
        } else {
            this.setState({
                status: 'normal',
                message: '请输入手势密码',
            });
        }
        
    }

    onReset() {
        // this.setState({
        //     status: 'normal',
        //     message: 'Please input your password (again).'
        // });
    }

    render() {
        return (
            <GesturePassword
                ref='pg'
                status={this.state.status}
                message={this.state.message}
                onStart={() => this.onStart()}
                onEnd={(password) => this.onEnd(password)}
                onReset={() => this.onReset()}
                interval={1}
                />
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingTop: 100, 
  },
});
